import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { useAuth } from "@/features/useAuth"
import styled from "@emotion/styled"
import UserCenterCommunity from "./UerCenterCommunity"
import UserCenterBallance from "./UserCenterBallance"
import UserCenterEarnings from "./UserCenterEarnings"
import UserCenterGames from "./UserCenterGames"
import UserCenterHelp from "./UserCenterHelp"

const UserCenterBottomContainer = styled.div`
    height: 100%;
    width: 375rem;
    margin-top: 12rem;
    background-color: #f0f1f5;
    flex: 1;
`

const LogoutButton = styled(ButtonRegular)`
    width: 351rem;
    height: 48rem;
    background: #ffffff !important;
    font-family: "SF Pro Text";
    font-weight: 500;
    font-size: 16rem;
    line-height: 48rem;
    letter-spacing: 0%;
    text-align: center;
    color: #ff1f57;
    margin: 8rem auto;
    box-shadow: none !important;
    border: none !important;
    display: block !important;
`

export default function UserCenterBottom() {
    const { logout } = useAuth()
    return (
        <UserCenterBottomContainer>
            <UserCenterBallance></UserCenterBallance>
            {/* <UserCenterEarnings></UserCenterEarnings> */}
            <UserCenterGames></UserCenterGames>
            <UserCenterHelp></UserCenterHelp>
            {/* <UserCenterCommunity></UserCenterCommunity> */}
            <LogoutButton onClick={logout}>Logout</LogoutButton>
        </UserCenterBottomContainer>
    )
}
